<template>
  <div class="newProject">
    <div style="width: 95%;height: 700px; margin: auto;margin-top: 20px;">
      <div>
        <el-form>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 56px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span class="required">任务名称：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="">
                <span class="text">{{ taskInfo.name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="5" class="colLeft">
              <span>任务编号：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="">
                <span class="text">{{ taskInfo.no }}</span> </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 56px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span class="required">任务类型：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="">
                <span class="text">{{ taskInfo.taskTypeName }}</span> </el-form-item>
            </el-col>
            <el-col :span="5" class="colLeft">
              <span class="required">项目名称：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="">
                <span class="text">{{ taskInfo.projectName }}</span> </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 56px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span class="required">任务下达性质：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="">
                <span class="text">{{ taskInfo.nature }}</span> </el-form-item>
            </el-col>
            <el-col :span="5" class="colLeft">
              <span>状态：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="">
                <span class="text">{{ taskInfo.status }}</span> </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 56px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span class="required">开始时间</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="">
                <span class="text">{{ taskInfo.releaseTime }}</span> </el-form-item>
            </el-col>
            <el-col :span="5" class="colLeft">
              <span>结束时间：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="">
                <span class="text">{{ taskInfo.endTime }}</span> </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 56px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span class="required">承办部门</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="">
                <span class="text">{{ taskInfo.undertakeDeptName }}</span> </el-form-item>

            </el-col>
            <el-col :span="5" class="colLeft">
              <span>进度：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="">
                <span class="text">{{ taskInfo.overallCompletionRate }}</span> </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 56px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span class="required">数量：</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="">
                <span class="text">{{ taskInfo.taskCount }}</span> </el-form-item>
            </el-col>
            <el-col :span="5" class="colLeft">
              <span class="required">单位</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="">
                <span class="text">{{ taskInfo.taskUnitName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 56px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span class="required">经费下达单价(万元)</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <span class="text">{{ taskInfo.feeUnitPrice }}</span>
            </el-col>
            <el-col :span="5" class="colLeft">
              <span>经费下达总额(万元)</span>
            </el-col>
            <el-col :span="6" class="colRight">
              <el-form-item label="">
                <span class="text">{{ taskInfo.feeTotal }}</span> </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 140px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span>任务描述：</span>
            </el-col>
            <el-col :span="18" class="colRight">
              <span class="text">{{ taskInfo.taskContent }}</span>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between"
            style="border: 1px solid #DCDFE6;height: 140px;background-color: #F5F7FA;">
            <el-col :span="5" class="colLeft">
              <span>备注：</span>
            </el-col>
            <el-col :span="18" class="colRight">
              <span class="text">{{ taskInfo.remark }}</span>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <div class="division"></div>
    <!-- 审批日志 -->
    <LogsBox :logsData="flowList"></LogsBox>
  </div>
</template>

<script>
import { launchNewTaskProcessList } from '@/api/project/task'
import LogsBox from "@/components/LogsBox";

export default {
  components: {
    LogsBox
  },
  props: {
    taskInfo: {
      type: Object,
      required: false,
    }
  },
  dicts: ['xmgl_process_status'],
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      flowList: [],
      processStatusOption: [],
    }
  },
  mounted() {
    this.processStatusOption = this.getDict('xmgl_process_status')
    console.log('this.taskInfo', this.taskInfo)
    this.getApproveStatus();
  },
  methods: {
    getApproveStatus() {
      launchNewTaskProcessList(this.$route.query.taskId).then(res => {
        this.flowList = [];
        this.flowList = res.data.sort((a, b) => {
          if (a.doneTime === null) return 1;
          if (b.doneTime === null) return -1;
          return new Date(a.doneTime).getTime() - new Date(b.doneTime).getTime();
        });
        res.data.forEach(item => {
          this.processStatusOption.forEach(item2 => {
            if (item.status == item2.value) {
              item.status = item2.label
            }
          });
        });
        // console.log('launchNewTaskProcessList', res)
        return res;
      })
    },
    getDict(dictName) {
      let dict = this.$store.state.dictNew[dictName]
      return dict
    },
    onSubmit() {
      console.log('submit!');
    }
  }
}
</script>

<style scoped lang="scss">
.newProject {
  display: flex;
  flex-direction: column;
  width: 95%;
  height: 100%;
  margin-top: 20px;

  .colRight {

    padding: 10px;
    background-color: #FFFFFF;

    .text {
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #606266;
      line-height: 22px;
    }
  }

  .colLeft {
    /* border: 1px solid #DCDFE6; */
    background-color: #F5F7FA;
    text-align: center;
    margin: auto;
  }

  .bottomAll {
    background-color: #FFFFFF;
    width: 103%;
    margin-top: 10px;

    .bottomTitle {
      width: 100%;
      height: 46px;
      align-items: center;
      border-bottom: 2px solid #DCDFE6;
      margin-bottom: 30px;
      display: flex;
      align-items: center;

      .bottomText {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 16px;
        color: #303133;
        line-height: 24px;
        margin-left: 20px;
      }
    }
  }
}

.logs {
  width: 100%;
  border: 1px solid #666;
  color: #999;

  .logsTitle {
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
    border-bottom: 2px solid #999;
  }

  .logsContent {
    padding-top: 30px;

    // ::v-deep .el-timeline-item__wrapper {
    //   height: 120px;
    // }

    .opinions {
      width: 600px;
      height: 50px;
      line-height: 50px;
      background: #f2f2f2;
      border-radius: 4px;
      padding-left: 10px;
    }
  }
}

.line {
  width: 100%;
  height: 2px;
  background: #999;
  margin-bottom: 20px;
}

.division {
  width: 12000px;
  height: 50px;
  background-color: #F5F7FA;
}

/* span.required::after {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
} */
</style>
<style>
.el-form-item__error {
  z-index: 999 !important;
}
</style>
